<template>
  <div class="treeWrap" :class="!isCollapsed ? 'isSHow' : 'isHide'">
    <div class="button">
      <a-button class="defaultButton" type="primary" @click="handClick">
        <a-icon v-if="!isCollapsed" type="left" />
        <a-icon v-else type="right" />
      </a-button>
    </div>
    <div class="contentWrap">
      <!-- <div class="treeSeacrh">
        <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
      </div> -->
      <div class="contentWrap-header" v-if="[993].includes(Number(ids))">
        <TreeHeaderBtn :onCallBack="onCallBack" :treeList="treeList" :onTreeRefresh="onTreeRefresh"></TreeHeaderBtn>
      </div>
      <a-tree :selected-keys="selectedKeys" :defaultExpandAll="treeSet.defaultExpand.length == 0"
        :defaultExpandedKeys="treeSet.defaultExpand" :tree-data="treeList" @select="onSelect"
        :replaceFields="replaceFields" class="tree">
        <!-- <template slot="name" slot-scope="{ name }">
          <span v-if="name.indexOf(searchValue) > -1">
            {{ name.substr(0, name.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ name }}</span>
        </template> -->
      </a-tree>
    </div>
  </div>
</template>
<script>
import { locationF } from "../js/js";
import TreeHeaderBtn from './components/Options/TreeHeaderBtn.vue';
export default {
  name: "TreeList",
  components: {
    TreeHeaderBtn,
  },
  props: {
    treeList: {
      type: [Object, Array],
    },
    onCallBack: {
      type: [Function],
    },
    ids: {
      type: [String, Number],
    },
    onTreeRefresh: {
      type: Function,
    },
    // 树状图一些设置
    treeSet: {
      type: Object,
    },
    changeBoolean: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      isCollapsed: false,
      selectedKeys: [],
      replaceFields: {
        children: "child",
        title: "name",
        key: "id",
      },
      searchValue: '',
    };
  },
  methods: {
    handClick() {
      let isBoolean = !this.isCollapsed;
      this.isCollapsed = isBoolean;
      locationF("set", "isCollapsed", this.ids, isBoolean ? "yes" : "no");
    },
    onSelect(selectedKeys, { selectedNodes, event }) {
      if (selectedNodes.length <= 0 && [977].includes(Number(this.ids))) {
        return;
      }
      this.selectedKeys = selectedKeys;
      if (selectedKeys.length > 0) {
        let obj = {
          label: selectedNodes
            .map((val) => val.data.props.name || val.data.props.title || val.data.props.label)
            .join(","),
          value: selectedKeys.join(","),
        };
        this.onCallBack(selectedKeys.join(","), obj);
      } else {
        this.onCallBack();
      }
    },
    onChange(e) {
      const value = e.target.value;
      const expandedKeys = dataList
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, gData);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        // expandedKeys,
        searchValue: value,
        // autoExpandParent: true,
      });
    }
  },
  created() {
    let isBoolean = locationF("get", "isCollapsed", this.ids) == "yes" ? true : false;
    if (this.ids == '977') {
      // 灭火器默认展开树状图
      isBoolean = false;
    }
    this.isCollapsed = isBoolean;
  },
  mounted() { },
  watch: {
    isCollapsed: {
      handler(nVal, oVal) {
        if (typeof (this.changeBoolean) == 'function') {
          this.changeBoolean(!nVal);
        }
      },
      immediate: true,
    }
  }
};
</script>
<style lang="less" scoped>
.treeWrap {
  width: 240px;
  margin-right: 10px;
  height: 100%;
  padding: 12px;
  position: relative;
  flex-shrink: 0;
  background-color: var(--backColor);

  .defaultButton {
    width: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .button {
    position: absolute;
    right: -10px;
    top: 50%;
  }

  .contentWrap {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;

    ::v-deep {

      li.ant-tree-treenode-disabled>span:not(.ant-tree-switcher),
      li.ant-tree-treenode-disabled>.ant-tree-node-content-wrapper,
      li.ant-tree-treenode-disabled>.ant-tree-node-content-wrapper span {
        cursor: auto;
        color: rgba(0, 0, 0, 0.65) !important;
      }

      .ant-tree li span.ant-tree-switcher,
      .ant-tree li span.ant-tree-iconEle {
        width: 12px;
      }

      .ant-tree li ul {
        padding: 0px 0px 0px 12px;
      }

      .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
        // display: none;
        // width: 50%;
        width: 12px;
      }
    }

    &-header {
      width: 100%;
      position: sticky;
      top: 0px;
      left: 0px;
      z-index: 1;
      background-color: #ffffff;

    }

    .treeSeacrh {
      height: 32px;
      width: 100%;
      background-color: pink;
      position: sticky;
      z-index: 1;
      top: 0px;
    }

    .tree {
      max-height: 100%;
    }
  }
}

.isSHow {
  animation: show 0.5s ease-in-out forwards;
}

.isHide {
  animation: hide 0.5s ease-in-out forwards;
}

@keyframes show {
  0% {
    width: 0;
    padding: 0px;
  }

  60% {
    padding: 12px;
  }

  100% {
    width: 200px;
    padding: 12px;
  }
}

@keyframes hide {
  0% {
    width: 200px;
  }

  60% {
    padding: 12px;
  }

  100% {
    width: 0;
    padding: 0px;
  }
}
</style>
